<template>
  <div id="wrapper">
    <my-header backBtn>
      <div slot="title">
        宝宝信息
      </div>
    </my-header>
    <ul id="middle">
      <li class="middle_li">
        <div class="middle_li_div">
          <img class="icon_left" src="@/../static/img/kidInformation_headPortrait.png" alt="">
          <span>宝宝头像：</span>
        </div>
        <div id="kidHeadPortrait" style="padding: 5px;">
          <img id="kidHeadPortrait_img" :class="{smallViewport_true_kidHeadPortrait_img: isSmallViewport, largeViewport_true_kidHeadPortrait_img: isLargeViewport}" src="@/../static/img/class_a.png" alt="">
          <div>
            <span id="kidHeadPortrait_img_change" @click="changeHeadPortraitFn">更换</span>
            <span id="kidHeadPortrait_img_delete" @click="deleteHeadPortraitFn">删除</span>
          </div>
        </div>
      </li>
      <li class="middle_li">
        <div class="middle_li_div">
          <img class="icon_left" src="@/../static/img/kidInformation_name.png" alt="">
          <label for="kidName">宝宝姓名：</label>
          <input id="kidName" type="text" v-model="modal.form.name">
        </div>
      </li>
      <li class="middle_li">
        <div class="middle_li_div">
          <img class="icon_left" src="@/../static/img/kidInformation_schoolbag.png" alt="">
          <span>书包编号：</span>
          <span id="kidGpsCode" :class="{smallViewport_true_kidGpsCode: isSmallViewport}">{{modal.form.gpsCode}}</span>
          <span id="removeBinding" @click="removeBindingFn">解除绑定</span>
        </div>
      </li>
    </ul>
    <div id="footer" class="weui-dialog__ft">
      <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="modal.visible=false">取消</a>
      <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="subFormFn_save">保存</a>
    </div>
<!--    //别的页面弹出框写法-->
<!--    <div v-if="modal.visible">-->
<!--      <div class="weui-mask"></div>-->
<!--      <div class="weui-dialog">-->
<!--        <div class="dialog_close"  @click="modal.visible=false"><img  src="@/../static/img/dialog_close.png" /></div>-->
<!--        <div class="weui-dialog__hd"><strong class="weui-dialog__title">解绑智能书包</strong></div>-->
<!--        <div class="weui-dialog__bd"  style="text-align: left">-->
<!--          <div class="weui-cells weui-cells_form">-->
<!--            <div class="weui-cell">-->
<!--              <div class="weui-cell__bd jiebangcaozuo">-->
<!--                <img  src="@/../static/img/dialog_del.png" /> 您确定要对{{modal.form.name}}进行书包解除绑定操作吗？-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="weui-dialog__ft">-->
<!--          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_default" @click="cancelFn">取消</a>-->
<!--          <a href="javascript:void (0);" class="weui-dialog__btn weui-dialog__btn_primary sure_color" @click="subFormFn_confirm">确定</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
export default {
  name: "KidInformation",
  data() {
    return {
      modal: {
        visible: false,
        form: {
          studentId: '',
          gpsCode: '202012180073',
          name:'李大全'
        }
      },
      isSmallViewport: false,
      isLargeViewport: false
    }
  },
  methods: {
    subFormFn_save() {

    },
    cancelFn() {

    },
    subFormFn_confirm() {

    },
    removeBindingFn() {

    },
    changeHeadPortraitFn() {

    },
    deleteHeadPortraitFn() {

    }
  },
  mounted() {
    if (window.screen.width <= 360) {
      this.isSmallViewport = true
    }
    if (window.screen.width >= 480) {
      this.isLargeViewport = true
    }
  }
}
</script>

<style scoped>
  #wrapper {
    width: 100%;
    height: 100%;
  }
  #middle {
    display: block;
    list-style-type: none;
    height: calc((100vh - 64px) * 0.915);
  }
  .middle_li {
    display: block;
    border-bottom: solid 1px #F2F2F2;
    font-size: 18px;
    text-align: left;
    height: 15%;
    position: relative;
  }
  #middle li:first-child {
    height: 22.5%;
  }
  .middle_li_div {
    width: 100%;
    position: absolute;
    top: 32.5%;
  }
  .icon_left {
    width: 20px;
    margin: auto 2% auto 3.5%;
  }
  #kidHeadPortrait {
    height: 90%;
    position: absolute;
    top: 5%;
    padding: 5px;
  }
  #kidHeadPortrait_img {
    width: 80%;
    margin-bottom: -6px;
    /*border: solid 1px black;*/
    border-radius: 50%;
  }
  #kidHeadPortrait div span {
    font-size: 16px;
    margin-left: 8%;
    cursor: pointer;
    display: inline-block;
  }
  #kidHeadPortrait_img_change {
    color: #41C3F7;
  }
  #kidHeadPortrait_img_delete {
    color: #F07C97;
  }
  #kidName {
    height: 32px;
    width: 55%;
    font-size: 18px;
    color: #888888;
    border: solid 1px #888888;
    border-radius: 4px;
    text-indent: 5px;
  }
  #kidGpsCode {
    color: #888888;
  }
  #removeBinding {
    color: #EC5E5E;
    font-size: 16px;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    width: 70px;
    text-align: center;
    border: solid 1px #EC5E5E;
    border-radius: 13px;
    margin-bottom: 13px;
    margin-left: 5%;
    cursor: pointer;
  }
  #removeBinding2 {
    color: #EC5E5E;
    font-size: 16px;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    width: 70px;
    text-align: center;
    border: solid 1px #EC5E5E;
    border-radius: 13px;
    margin-bottom: 13px;
    margin-left: 5%;
    cursor: pointer;
  }
  .smallViewport_true_kidHeadPortrait_img {
    width: 60% !important;
    position: relative;
    left: 13%;
  }
  .largeViewport_true_kidHeadPortrait_img {
    width: 70% !important;
  }
  .smallViewport_true_kidGpsCode {
    font-size: 14px;
    margin-right: -5%;
  }
  #footer {
    margin-bottom: 0;
  }
  .jiebangcaozuo{
    color: #000000;
  }
  .sure_color {
    color: #06ae56;
  }
</style>
